<template>
    <div class="contion">
        <div class="user">
            <van-icon name="arrow-left" size="20" @click="back()" style="margin-left:20px"/>
            <span style="margin-left:200px"><b>编辑资料</b></span>
        </div>
        <div class="user_1">
            <p>用户名：<el-input v-model="userlist.username"/></p>
            <p>邮箱：<el-input v-model="userlist.email"/></p>
            <p>手机号：<el-input v-model="userlist.phone"/></p>
            <p class="button"><el-button type="primary" @click="updateUser()">保存</el-button></p>
        </div>
    </div>
</template>

<script setup>
import {ref,onMounted} from "vue"
import {ElMessage} from 'element-plus'
import axios from 'axios'
import {useRouter} from 'vue-router'
import Article from "./Article.vue"

const router = useRouter()

const back = () =>{
    router.back();
}

let userlist = ref({
    username:"",
    email:"",
    phone:""
})

const userId = localStorage.getItem('userid')

const getUser = () =>{
    axios.get(`http://127.0.0.1:8000/home/update/${userId}`).then(res=>{
        userlist.value = res.data
    })
}

const updateUser = () =>{
    axios.put(`http://127.0.0.1:8000/home/update/${userId}/`,userlist.value).then(res=>{
            ElMessage.success('修改成功')
            getUser()
    })
}

onMounted(()=>{
    getUser()
})
</script>

<style scoped>
.contion{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    vertical-align: middle;
}

.user{
    width: 500px;
    margin-top: 20px;
}

.user_1{
    margin-top: 20px;
}

.button button{
    margin-top: 300px;
    width: 300px;
    height: 50px;
    background-color: #E44F32;
    border: 1px solid #E44F32;
    color: #FFFFFF;
    border-radius: 15px;
}
</style>